import {Image, StyleSheet, View, Text, TouchableOpacity, Modal, ScrollView} from 'react-native';
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useRef, useState} from "react";
import demoImage from "@/assets/demoImg/demo.png";
// import Video, {VideoRef} from 'react-native-video';
import { Video } from 'expo-av';
import closeIcon from "@/assets/images/space/closeIcon.png"
import { getSpaceVideoListByIdRequest } from "@/services/spaceServices";

export default function videoListScreen() {

    const [showVideo, setShowVideo] = useState(false);
    const [list, setList] = useState([]);
    const [watchUrl, setWatchUrl] = useState("https://www.bilibili.com/video/BV11yrkYME4G/?share_source=copy_web&vd_source=dd928a9a83c7a385ed39b7729e887529");
    const [key, setKey] = useState(0);

    const router = useRouter();
    const routerParams = useLocalSearchParams();
    // const videoRef = useRef<VideoRef>(null);
    // const background = require('demoVideo');

    useEffect(() => {
        getSpaceVideoListByIdRequest(routerParams.spaceId)
            .then(res => {

                setList(res?.data?.videoList)
                console.log('resresresres', res)
            })
            .catch(err => {
                console.log('err', err)
            })
    }, []);



    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '视频列表', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.videoListContainer}>
                <ScrollView style={{ height: "100%", width: "100%" }}>
                    {
                        list.map((item: any, index: number) => {
                            return (
                                <TouchableOpacity onPress={() => {
                                    setShowVideo(true);
                                    // setWatchUrl('http://www.w3school.com.cn/example/html5/mov_bbb.mp4')
                                    setWatchUrl(item.url)
                                    // setKey((prev) => prev + 1); // 修改 key 强制组件重新加载
                                    console.log('item', item.url)
                                }} key={index}>
                                    <View style={styles.videoItem}>
                                        <View style={styles.banner}>
                                            <Image source={{ uri: item?.coverUrl }} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={styles.videoItemRight}>
                                            <View style={styles.title}>
                                                <Text style={styles.titleText} numberOfLines={2}>{ item.title }</Text>
                                            </View>
                                            <View style={styles.date}>
                                                <Text style={styles.dateText}>{ item.uploadTime }</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
            </View>

            <Modal
                animationType="fade"
                transparent={true}
                visible={showVideo}
            >
                <View style={styles.modalContainer}>
                    <View style={styles.VideoView}>
                        <TouchableOpacity onPress={() => setShowVideo(false)}>
                            <View style={styles.closeIcon}>
                                <Image source={closeIcon} style={{ width: "100%", height: "100%" }} />
                            </View>
                        </TouchableOpacity>

                        <Video
                            source={{ uri: watchUrl }}  // 你的视频 URL
                            style={{ width: '100%', height: '100%' }}
                            useNativeControls  // 显示原生控制条
                            resizeMode="cover"  // 设置视频显示模式
                            isLooping={true}  // 是否循环播放
                            onError={(error) => console.log(error)}  // 错误回调
                            videoStyle={styles.backgroundVideo}
                            shouldPlay
                        />

                        {/*<Video*/}
                        {/*    key={key}*/}
                        {/*    source={{*/}
                        {/*        uri: watchUrl,*/}
                        {/*        headers: {*/}
                        {/*            "Range":"range=bytes=0-50",*/}
                        {/*            'User-Agent': 'PostmanRuntime/7.28.4'*/}
                        {/*        },*/}
                        {/*    }}*/}
                        {/*    // Store reference*/}
                        {/*    // ref={videoRef}*/}
                        {/*    // Callback when remote video is buffering*/}
                        {/*    style={styles.backgroundVideo}*/}
                        {/*    repeat={true}       // 循环播放*/}
                        {/*    controls={true}     // 显示播放控制器*/}
                        {/*    paused={false}      // 自动播放*/}
                        {/*    onError={(error) => console.log('Video Error:', error)}*/}
                        {/*/>*/}
                    </View>
                </View>

            </Modal>
        </View>

    );
}

const styles = StyleSheet.create({
    videoListContainer: {
        paddingHorizontal: 14,
    },
    videoItem: {
        flexDirection: "row",
        marginBottom: 22,
    },
    banner: {
        width: 132,
        height: 80,
        borderRadius: 6,
        overflow: "hidden",
    },
    videoItemRight: {
        marginLeft: 10,
        position: "relative",
    },
    date: {
        position: "absolute",
        bottom: 0,
    },
    dateText: {
        color: "#9C9EAC",
    },
    title: {
        position: "absolute",
        top: 0,
    },
    titleText: {
        width: 200,
    },
    modalContainer: {
        backgroundColor: 'rgba(0,0,0, 1)',
        height: "100%",
        flex: 1,
    },
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    VideoView: {
        width: "100%",
        height: 400,
        position: "relative",
        top: 200,
        // backgroundColor: "#fff",
    },
    closeIcon: {
        width: 26,
        height: 26,
        position: 'absolute',
        top: -40,
        left: 15,
        // backgroundColor: "#fff",
    },
});
